<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>部件实际分布图表</title>
  <!-- 引入 Element UI 的样式 -->
  <link rel="stylesheet" href="../../assets/css/element-ui.css"/>
  <link rel="stylesheet" href="../../assets/css/styles.css"/>
  <script src="../../assets/js/cdn.js"></script>
    <link rel="stylesheet" href="../../assets/fontawesome-free-6.7.2-web/css/all.min.css" />
</head>
<body>
<div id="app">
  <!-- <div class="header">
    <div class="container header-content">
      <div class="logo">订单管理系统</div>
      <div style="position: absolute; left: 50%;">
        <el-button type="primary" size="large" @click="openMenu('../../../index.html')">
          首页
        </el-button>
        <el-dropdown size="large" @command="openMenu">
          <el-button type="primary" size="large">
            业务中心<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="item in businessCenters" :command="item.path">{{item.name}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="user-info" v-if="currentUser.name">
        欢迎，{{ currentUser.name }}
        <el-button type="primary" size="mini" @click="exit(2)">登出</el-button>
      </div>
    </div>
  </div> -->
  <lx-header slot="header" v-on:toggle="isToggle = !isToggle"></lx-header>
  <div class=" main-content">

    <template>
      <div>
        <el-table
            :data="tableData"
            :span-method="objectSpanMethod"
            border
            :show-header="false"
            :cell-style="cellStyle"
            style="width: 100%">
          <el-table-column v-for="(value, index) in tableData[0] || []" :key="index" :label="''" :width="index === 1 ? 200 : null">
            <template slot-scope="scope">
              <span v-html="highlightParentheses(scope.row[index])"></span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </template>
  </div>
</div>

<script src="../../assets/js/constant.js"></script>
<script src="../../assets/js/utils.js"></script>
<script src="../../assets/js/auth.js"></script>
<script src="../../assets/js/axios.min.js"></script>
<!-- 引入 Vue.js -->
<script src="../../assets/js/vue.js"></script>
<!-- 引入 Element UI 的 JS 文件 -->
<script src="../../assets/js/element-ui.js"></script>
</body>
</html>
<script type="module">
   import LxHeader from '../../pages/components/LxHeader/index.js'
    Vue.component('lx-header', LxHeader)
    checkAuthentication(2)
    new Vue({
        el: '#app',
        components: {},
        data() {
            return {
                currentUser: JSON.parse(localStorage.getItem('currentUser')) || {},
                userMenuList: JSON.parse(localStorage.getItem('userMenuList')) || [],
                businessCenters: [
                    {name: '订单中心', path: '../index.html'},
                    {name: '用户中心', path: '#'},
                    {name: '产品中心', path: '#'},
                    {name: '库存中心', path: '#'},
                    {name: '财务中心', path: '#'},
                    {name: '数据中心', path: '#'},
                    {name: '系统中心', path: '#'},
                    {name: '消息中心', path: '#'}
                ],
                root_host: root_host,
                request_host: request_host,
                tableData: [],
            };
        },
        created() {
            this.getComponentUsedData()
        },
        methods: {
            exit,
            openMenu(url) {
                window.open(url)
            },
            getComponentUsedData() {
                try {
                    axios.get(`${this.request_host}/report/getComponentActualUsedData`).then((response) => {
                        if (response.status == 200) {
                            this.tableData = response.data.data
                        }
                    })
                } catch (error) {
                    console.error('请求失败:', error)
                }
            },
            objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                if (rowIndex === 0) {
                    if (columnIndex < 2) {
                        return [1, 1];
                    }
                    if (row[columnIndex] === '') {
                        return [0, 0];
                    }
                    let span = 1;
                    for (let i = columnIndex + 1; i < row.length; i++) {
                        if (row[i] === '') {
                            span++;
                        } else {
                            break;
                        }
                    }
                    return [1, span];
                } else if (rowIndex === 1) {
                    if (columnIndex < 2) {
                        return [1, 1];
                    }
                    if (row[columnIndex] === '') {
                        return [0, 0];
                    }
                    return [1, 1];
                }
            },
            cellStyle() {
                return 'text-align: center';
            },
            highlightParentheses(text) {
                return text.replace(/\((.*?)\)/g, '<span style="color: green">($1)</span>');
            }
        }
    })
</script>